<template>
	<div class="extra-wrap" v-if="extraOrders.length">
		<div class="extra-item" v-for="(item, index) in extraOrders" :key="index">
			<div class="title">{{ `第${index + 1}次售后` }}</div>
			<div class="content">
				<span>金额：¥{{ item.fee }}</span>
				<span>理由：{{ EXTRA_TAG[item.reason] }}</span>
				<span>备注：{{ item.remark || "暂无备注" }}</span>
			</div>
		</div>
	</div>
	<div v-else></div>
</template>

<script>
import { EXTRA_TAG } from "@/assets/js/params.js";
import dayjs from "dayjs";
export default {
	name: "ExbandOrder",
	props: {
		props: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return { EXTRA_TAG };
	},
	computed: {
		extraOrders() {
			return this.props.row.extraOrders.map((e) => {
				if (e.updatedAt)
					e.updatedTime = dayjs(e.updatedAt).format("YYYY-MM-DD HH:mm:ss");
				if (e.createdAt) {
					e.createdTime = dayjs(e.createdAt).format("YYYY-MM-DD HH:mm:ss");
				}
				console.log(e);
				return e;
			});
		},
	},
};
</script>

<style lang="less" scoped>
.extra-wrap {
	padding: 10px;
	color: #666;
	.extra-item {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
		.title {
			font-weight: bold;
			color: #333;
			margin-right: 20px;
		}
		.content {
			display: flex;
			align-items: center;
			span {
				margin-right: 15px;
			}
		}
	}
}
</style>

